//支付管理---新增方案
import React,{Component} from 'react'
import {Divider,Button,Form,Input,Select  ,Breadcrumb,message} from 'antd'     
import NumberInput from '../../../components/NumberInput/NumberInput'
import './SplittingAddacount.css'
import * as tools from '../../../tools/tools'
import $ from 'jquery'

const FormItem = Form.Item;
const Option = Select.Option;

class SplittingAddacount extends Component{         
  constructor(props){
    super(props)
    this.state={
      distributiondata:[
        {
          type:1,
        },
        {
          type:2,
        },
        {
          type:3,
        },
        {
          type:4,
        }
      ],
      Splitdetails:null,
      service:'',
      mode:'',
      business:'',
      person:'',
      bind:'',
      bank:'',
    }
  }

  componentWillMount(){
    this.bankrate();
    if(this.props.location.state){
      tools.loginView(this).then(
        $.ajax({
          type:"post",
          url:tools.apiUrl+"payment/allot_programme_info",
          data:{
            token:localStorage.token,
            id:this.props.location.state.id
          },
          success:(res)=>{
            if(res.status ==1){
              console.log(res)
              this.setState({
                Splitdetails:res.result
              })
            }else{
              message.error(res.msg)
            }
          }
        })
      )
    }
  }

  addGoback=()=>{
    this.props.history.push("/HomePage/PaymentManagement/SplittingTemplate")
  }

  handleSubmit=()=>{
    this.props.form.validateFields((err, values) => {
      values.allot_plan=[];
      values.allot_plan.push(values.allot_plan1)
      values.allot_plan.push(values.allot_plan2)
      values.allot_plan.push(values.allot_plan3)
      values.allot_plan.push(values.allot_plan4)
      delete values.allot_plan1;
      delete values.allot_plan2;
      delete values.allot_plan3;
      delete values.allot_plan4;
      values.allot_plan.map((item)=>{
        item.service !=null?item.service /=100:item.service =0;
        item.company != null?item.company /=100:item.company =0;
        item.business != null?item.business /=100:item.business =0;
        item.person != null?item.person /=100:item.person =0;
        item.bind != null?item.bind /=100:item.bind =0;
        item.recommend != null?item.recommend /=100:item.recommend =0;
        item.bank != null?item.bank /=100:item.bank =0;
      })
      if(this.props.location.state){
        values.id = this.props.location.state.id
      }
      values.token =localStorage.token
      console.log(values)
      if(!err){
        tools.loginView(this).then(
          $.ajax({
            type:'post',
            url:this.props.location.state?tools.apiUrl+"payment/allot_programme_edit":tools.apiUrl+"payment/allot_programme_add",
            data:values,
            success:(res)=>{
              if(res.status ==1){
                console.log(res)
                this.props.form.resetFields();
                this.props.history.push("/HomePage/PaymentManagement/SplittingTemplate")
              }else{
                message.error(res.msg)
              }
            }
          })
        )
      }else{
        console.log(222)
        console.log(err)
      }
    })
  }

  handlCancel=()=>{
    this.props.form.resetFields();
    this.props.history.push("/HomePage/PaymentManagement/SplittingTemplate")
  }


  Interestdistribution=(data)=>{      //利益与分配
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { Splitdetails} = this.state;
    return data.map((item)=>{
        return(
          <div className="SplitAdd_form_distribution">
            <Divider />
              <FormItem label='类型'>
                {getFieldDecorator(`allot_plan${item.type}[type]`,{
                  initialValue:item.type
                })(
                  <Select  >
                    <Option value={item.type}>{item.type ==1?"未核销券":(item.type==2?"买单立减券":(item.type==3?"消费返券":"商圈联盟"))}</Option>
                  </Select>
                )}
              </FormItem>
              {item.type ==4? 
              <FormItem label='手续费'>
                {getFieldDecorator(`allot_plan${item.type}[mode]`,{
                  initialValue:2
                })(
                  <Select >
                    <Option  value={2}>自定义</Option>
                  </Select>
                )}
                {this.props.form.getFieldValue(`allot_plan${item.type}[mode]`) ==2?
                <FormItem style={{marginBottom: 10}}>
                  {getFieldDecorator(`allot_plan${item.type}[service]`,{
                    initialValue:this.state.service
                  })(
                    <NumberInput value={this.state.service} placeholder="请输入费率" addonAfter="%" type={1}/> 
                  )}
                  </FormItem>
                 :false }
              </FormItem>:
              <FormItem label='手续费'>
                {getFieldDecorator(`allot_plan${item.type}[mode]`,{
                  initialValue:1
                })(
                  <Select>
                    <Option value={1}>签约费率</Option>
                    <Option value={2}>自定义</Option>
                  </Select>
                )}
                {this.props.form.getFieldValue(`allot_plan${item.type}[mode]`) ==2?
                <FormItem style={{marginBottom: 10}}>
                  {getFieldDecorator(`allot_plan${item.type}[service]`,{
                    initialValue:this.state.service
                  })(
                    <NumberInput value={this.state.service} placeholder="请输入费率" addonAfter="%" type={1}/> 
                  )}
                  </FormItem>
                 :false }
              
              </FormItem>}
              

              {this.props.form.getFieldValue(`allot_plan${item.type}[mode]`) ==2?
              <FormItem label="分配">
                <div className="SplitAdd_distribution">
                  <div>平台</div>
                  {getFieldDecorator(`allot_plan${item.type}[company]`, {
                      initialValue:this.props.form.getFieldValue(`allot_plan${item.type}[service]`)?(this.props.form.getFieldValue(`allot_plan${item.type}[service]`)-this.props.form.getFieldValue(`allot_plan${item.type}[business]`)-this.props.form.getFieldValue(`allot_plan${item.type}[person]`)-this.props.form.getFieldValue(`allot_plan${item.type}[bind]`)-
                      this.props.form.getFieldValue(`allot_plan${item.type}[recommend]`)-this.props.form.getFieldValue(`allot_plan${item.type}[bank]`)):""
                  })(
                      <Input disabled  value={this.props.form.getFieldValue(`allot_plan${item.type}[service]`)?(this.props.form.getFieldValue(`allot_plan${item.type}[service]`)-this.props.form.getFieldValue(`allot_plan${item.type}[business]`)-this.props.form.getFieldValue(`allot_plan${item.type}[person]`)-this.props.form.getFieldValue(`allot_plan${item.type}[bind]`)-
                          this.props.form.getFieldValue(`allot_plan${item.type}[recommend]`)-this.props.form.getFieldValue(`allot_plan${item.type}[bank]`)):""} style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                  )}
                </div>
                <div className="SplitAdd_distribution">
                  <div>城市服务商</div>
                  {getFieldDecorator(`allot_plan${item.type}[business]`,{
                    initialValue:''
                  })(
                      <NumberInput  style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%" onChange={val=>console.log(val)} type={1}/>
                  )}
                </div>
                <div className="SplitAdd_distribution">
                  <div>客户经理</div>
                  {getFieldDecorator(`allot_plan${item.type}[person]`,{
                    initialValue:''
                  })(
                      <NumberInput  style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%" onChange={val=>console.log(val)} type={1}/>
                  )}
                </div>
                <div className="SplitAdd_distribution">
                  <div>绑客商家</div>
                  {getFieldDecorator(`allot_plan${item.type}[bind]`,{
                    initialValue:''
                  })(
                      <NumberInput  style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%" onChange={val=>console.log(val)} type={1}/>
                  )}
                </div>
                <div className="SplitAdd_distribution">
                  <div>推广商家</div>
                  {getFieldDecorator(`allot_plan${item.type}[recommend]`,{
                    initialValue:''
                  })(
                    <NumberInput disabled={item.type ==2?"disabled":(item.type ==3?"disabled":false)} style={{ width: 100,marginLeft:10 }} type={1} placeholder="费率" addonAfter="%" onChange={val=>console.log(val)}/>
                  )}  
                </div>
                <div className="SplitAdd_distribution">
                  <div>银行</div>
                  {getFieldDecorator(`allot_plan${item.type}[bank]`, {
                    initialValue:this.state.bankrate*100
                  })(
                      <Input disabled value={this.state.bankrate*100}  style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%" />
                  )} 
                </div>
              </FormItem>:false}
          </div>
        )
    })
  }

  bankrate=()=>{
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:tools.apiUrl+'payment/conifg_info',
        data:{
          token:localStorage.token,
          config_key:'bank_service'
        },
        success:(res)=>{
          if(res.status ==1){
            this.setState({
              bankrate:res.result.value
            })
          }
        }
      })
    )
  }

  editdistribution=(data)=>{          //修改时的利益与分配
    const { getFieldDecorator, getFieldValue } = this.props.form;
    let child =data? data.service.map((item)=>{
      return(
         <div className="SplitAdd_form_distribution">
            <Divider />
              <FormItem>
              {getFieldDecorator(`allot_plan${item.type}[id]`,{
                  initialValue:item.id
                })(
                  <div></div>
                )}
              </FormItem>
              <FormItem label='类型'>
                {getFieldDecorator(`allot_plan${item.type}[type]`,{
                  initialValue:item.type
                })(
                  <Select  >
                    <Option value={item.type}>{item.type ==1?"未核销券":(item.type==2?"买单立减券":(item.type==3?"消费返券":"商圈联盟"))}</Option>
                  </Select>
                )}
              </FormItem>
              {item.type ==4? 
              <FormItem label='手续费'>
                {getFieldDecorator(`allot_plan${item.type}[mode]`,{
                  initialValue:1
                })(
                  <Select>
                    <Option value={1}>签约费率</Option>
                  </Select>
                )}
              </FormItem>:
              <FormItem label='手续费'>
                {getFieldDecorator(`allot_plan${item.type}[mode]`,{
                  initialValue:item.mode
                })(
                  <Select>
                    <Option value={1}>签约费率</Option>
                    <Option value={2}>自定义</Option>
                  </Select>
                )}
                {item.mode ==2?
                <FormItem style={{marginBottom: 0}}>
                  {getFieldDecorator(`allot_plan${item.type}[service]`,{
                    initialValue:item.service*100
                  })(
                    <Input  placeholder="请输入费率" addonAfter="%"/>
                  )}
                  </FormItem>
                 :false }
              </FormItem>}
              {item.mode ==2?
              <FormItem label="分配">
                {getFieldDecorator(`allot_plan${item.type}[company]`, {
                    initialValue:item.company*100
                })(
                  <div className="SplitAdd_distribution">
                    <div>平台</div>
                    <Input disabled value={item.company*100} style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                  </div>
                    
                )}
                
                {getFieldDecorator(`allot_plan${item.type}[business]`,{
                  initialValue:item.business*100
                })(
                    <div className="SplitAdd_distribution">
                      <div>城市服务商</div>
                      <Input value={item.business*100} style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                    </div>
                      
                )}

                {getFieldDecorator(`allot_plan${item.type}[person]`,{
                  initialValue:item.person*100
                })(
                    <div className="SplitAdd_distribution">
                      <div>客户经理</div>
                      <Input value={item.person*100} style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                    </div>
                      
                )}

                {getFieldDecorator(`allot_plan${item.type}[bind]`,{
                  initialValue:item.bind*100
                })(
                    <div className="SplitAdd_distribution">
                      <div>绑客商家</div>
                      <Input  value={item.bind*100} style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                    </div>
                      
                )}

                {getFieldDecorator(`allot_plan${item.type}[recommend]`,{
                  initialValue:item.recommend*100
                })(
                    <div className="SplitAdd_distribution">
                      <div>推广商家</div>
                      <Input value={item.recommend*100} disabled={item.type==2?"disabled":(item.type==3?"disabled":"none")} style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                    </div>
                      
                )}  

                {getFieldDecorator(`allot_plan${item.type}[bank]`, {
                  initialValue:item.bank*100
                })(
                    <div className="SplitAdd_distribution">
                      <div>银行</div>
                      <Input disabled value={item.bank*100}  style={{ width: 100,marginLeft:10 }} placeholder="费率" addonAfter="%"/>
                    </div>
                      
                )} 
              </FormItem>:false}
          </div>
      )
    }):false
    return child
  }

  render(){
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const {Splitdetails} = this.state
    let children = this.props.location.state?this.editdistribution(Splitdetails?Splitdetails:false):this.Interestdistribution(this.state.distributiondata);

    return(
        <div className="tariff_box">
          <div>
            <Breadcrumb>
              <Breadcrumb.Item >
                支付管理
              </Breadcrumb.Item>
              <Breadcrumb.Item >
                费率管理   
              </Breadcrumb.Item>
              <Breadcrumb.Item >
                分润模板   
              </Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <Divider />
          <div className="SplitAdd_title">
            <span>{this.props.location.state?"修改方案":"新建方案"}</span>
            <div>
              <Button onClick={this.addGoback}>返回</Button>
            </div>
          </div>
          <Divider />
          <div className="SplitAdd_content">

              <div style={{fontWeight:'bold'}}>基本信息</div>
              <Divider />

              <Form layout="inline" className="SplitAdd_form" onSubmit={this.handleSubmit} >
                  {this.props.location.state?<FormItem label='方案名称'>
                      {getFieldDecorator('name',{
                        rules:[{required:true,message:' ',max:20}],
                        initialValue:Splitdetails?Splitdetails.name:''
                      })(
                        <Input style={{ width: 300, }} placeholder="请输入方案名称(20字以内)"   />
                      )}
                    </FormItem>:
                    <FormItem label='方案名称'>
                      {getFieldDecorator('name',{
                        rules:[{required:true,message:' ',max:20}]
                      })(
                        <Input style={{ width: 300, }} placeholder="请输入方案名称(20字以内)"   />
                      )}
                    </FormItem>}

                    {this.props.location.state?<FormItem label='方案描述'>
                      {getFieldDecorator('describe',{
                        rules:[{required:true,message:' ',max:150}],
                        initialValue:Splitdetails?Splitdetails.describe:''
                      })(
                        <textarea cols="50" rows="2" placeholder="请输入备注，最多150字"  maxLength="150" style={{resize:'none',border: '1px solid #d9d9d9',borderRadius: '4px'}} />
                      )}
                    </FormItem>:
                    <FormItem label='方案描述'>
                      {getFieldDecorator('describe',{
                        rules:[{required:true,message:' ',max:150}]
                      })(
                        <textarea cols="50" rows="2" placeholder="请输入备注，最多150字"  maxLength="150" style={{resize:'none',border: '1px solid #d9d9d9',borderRadius: '4px'}} />
                      )}
                    </FormItem>}
                    

                    <div style={{fontWeight:'bold',marginTop:'30px'}}>利润与分配</div>
                    {children}
              </Form>
              <div className="SplitAdd_cancelOrsubmit">
                <Button onClick={this.handlCancel} style={{marginRight:"30px"}}>取消</Button>
                <Button type="primary" onClick={this.handleSubmit}>确定</Button>
              </div>
              
          </div>

        </div>
    )
  }
}
const FormSplittingAddacount  = Form.create()(SplittingAddacount);
export default FormSplittingAddacount

